import { SaveOutlined, PlusOutlined } from '@ant-design/icons';
import type { ProFormInstance } from '@ant-design/pro-components';
import {
  ProForm,
  ProFormText,
  ProFormItem,
  ProFormSelect,
  ProFormRadio,
  ProFormDigit,
  ProFormTreeSelect,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { Space, Button, message, Modal } from 'antd';
import { useRef, useEffect, useState } from 'react';
import {
  getSystemOfficeTreeData,
  OfficeInfoSaveRequest,
} from '@/pages/Dashboard/System/Office/service';
import { OfficeInfoSaveRequestParams } from './data';
import { queryUserList } from '@/pages/Dashboard/System/User/service';
import styles from './style.less';
const OfficeFormModal = ({
  parentOfficeId,
  officeFormValues,
  show,
  onCancel,
  onSuccess,
}: {
  parentOfficeId?: string;
  officeFormValues: any;
  show: boolean;
  onCancel?: () => void;
  onSuccess?: () => void;
}) => {
  const [loading, setLoading] = useState(false);
  const formRef = useRef<ProFormInstance>();

  const [masterOptions, setMasterOptions] = useState([]); // 负责人下拉选项数据
  const [contactOptions, setContactOptions] = useState([]); // 联系人下拉选项数据

  useEffect(() => {
    if (officeFormValues && Object.keys(officeFormValues).length > 0) {
      getUserList();
    }
  }, [officeFormValues.id]);

  const getUserList = async () => {
    const res = await queryUserList({
      pageNo: '1',
      pageSize: '999',
      officeId: officeFormValues ? officeFormValues.id : '',
      keywords: '',
    });
    setMasterOptions(res.data.list);
    setContactOptions(res.data.list);
  };
  const handleSubmit = (e: any) => {
    formRef.current?.validateFieldsReturnFormatValue?.().then((val) => {
      setLoading(true);
      const requestParams: OfficeInfoSaveRequestParams = val;
      OfficeInfoSaveRequest(requestParams).then((res) => {
        if (res.code == 200) {
          setLoading(false);
          onSuccess?.();
          onCancel?.();
        } else {
          setLoading(false);
        }
      });
    });
  };
  return (
    <Modal
      title={<Space>{Object.keys(officeFormValues).length > 0 ? '修改部门' : '添加部门'}</Space>}
      visible={show}
      centered
      width={'40%'}
      destroyOnClose={true}
      footer={false}
      bodyStyle={{ padding: 10 }}
      onCancel={onCancel}
    >
      <ProForm
        initialValues={officeFormValues}
        formRef={formRef}
        layout="horizontal"
        className={styles.form}
        labelCol={{
          style: {
            width: 80,
          },
        }}
        submitter={false}
      >
        <ProFormTreeSelect
          name="parentId"
          initialValue={parentOfficeId}
          fieldProps={{
            defaultValue: parentOfficeId,
          }}
          label="父级部门"
          placeholder="请选择"
          allowClear
          required
          rules={[
            {
              required: true,
              message: '请选择父级部门',
            },
          ]}
          request={async () => {
            const res = await getSystemOfficeTreeData();
            return res.data;
          }}

          // tree-select args
          //   fieldProps={{
          //     showArrow: false,
          //     filterTreeNode: true,
          //     showSearch: true,
          //     dropdownMatchSelectWidth: false,
          //     labelInValue: true,
          //     autoClearSearchValue: true,
          //     multiple: true,
          //     treeNodeFilterProp: 'title',
          //     fieldNames: {
          //       label: 'title',
          //     },
          //   }}
        />
        <ProFormText
          name="name"
          label="部门名称"
          required
          rules={[
            {
              required: true,
              message: '请输入部门名称',
            },
          ]}
        ></ProFormText>
        <ProFormSelect
          name="masterId"
          label="负责人"
          placeholder="请选择"
          allowClear
          fieldProps={{
            options: masterOptions,
            fieldNames: {
              value: 'id',
              label: 'nickName',
            },
          }}
          // required
          // rules={[
          // {
          //     required: true,
          //     message: '请选择负责人',
          // },
          // ]}
        />
        <ProFormSelect
          name="contactId"
          label="联系人"
          placeholder="请选择"
          allowClear
          // required
          // rules={[
          // {
          //     required: true,
          //     message: '请选择联系人',
          // },
          // ]}

          // tree-select args
          fieldProps={{
            options: contactOptions,
            fieldNames: {
              value: 'id',
              label: 'nickName',
            },
          }}
        />
        <ProFormText name="mobile" label="电话"></ProFormText>
        <ProFormText name="email" label="邮箱"></ProFormText>
        <ProFormTextArea
          name="introduction"
          label="部门简介"
          placeholder="请输入"
          // fieldProps={inputTextAreaProps}
        />
        <ProFormItem>
          <Button
            size="large"
            type="primary"
            loading={loading}
            onClick={handleSubmit}
            icon={<SaveOutlined />}
            style={{ marginLeft: 80 }}
          >
            确定
          </Button>
        </ProFormItem>
      </ProForm>
    </Modal>
  );
};

export default OfficeFormModal;
